<template>
  <div v-loading="loading" class="w-full h-full flex py20px justify-center">
    <el-form ref="formRef" style="max-width: 640px" :model="form" :rules="rules" label-width="auto" status-icon>
      <template v-for="item in fromList">
        <el-form-item :label="$t(item.label)" :prop="item.prop">
          <div class="flex flex-col gap10px">
            <el-input v-model="form[item.prop]" />
            <el-text class="leading-tight" line-clamp="10">{{$t(item.hint)}}</el-text>
          </div>
        </el-form-item>
      </template>
      <el-form-item label=" ">
        <el-button type="primary" @click="submitForm()">
          {{$t('btn.1')}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores";
import Api from '@/api/profile'
import { onMounted } from 'vue'
const { t } = useI18n();
const loading = ref(false)
const fromList = [
  { label: t("form.40"), prop: "current_password", hint: "" },
  { label: t("form.41"), prop: "password", hint: "" },
  { label: t("form.42"), prop: "password_confirmation", hint: "" },
]
const rules = {
  current_password: [{ required: true, message: t('hint.65'), trigger: 'blur' }],
  password: [{ required: true, message: t('hint.66'), trigger: 'blur' }],
  password_confirmation: [{ required: true, message: t('hint.67'), trigger: 'blur' }],
}
const form = ref({
  current_password: '',
  password: '',
  password_confirmation: ''
})
const formRef = ref()
const submitForm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      Api.psd(form.value).then(s => {
        ElMessage.success(t('hint.29'))
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
onMounted(() => {
})
</script>
